<template>
	<view :style="{ '--color': vuex_config.themeColor1 }">
		<u-sticky :h5-nav-height="0" :offset-top="offsetTop" :enable="enable">
			<!-- 输入框 -->
			<view class="sww-search-box" :style="[customStyle]">
				<view class="sww-search-content">
					<slot name="left">
						<view class="sww-search-left" v-if="addressList.length > 0" @click="$showAddress">
							<u-icon name="e769" custom-prefix="iconfont" size="30rpx" color="#666666"></u-icon>
							<view class="sww-sl-text u-line-1">{{ cityItem.name || '城市' }}</view>
						</view>
					</slot>
					<slot name="input">
						<view class="sww-search-center" @click="$showSearch">
							<view class="sww-s-icon">
								<u-icon name="e752" custom-prefix="iconfont" size="26rpx" color="#999999"></u-icon>
							</view>
							<view class="sww-s-input u-font-26 c-99">{{ searchKey || '请输入搜索的关键词' }}</view>
							<view class="sww-s-del" v-if="searchKey" @click.stop="$clearSearch(true)">
								<u-icon name="e725" custom-prefix="iconfont" size="26rpx" color="#333333"></u-icon>
							</view>
						</view>
					</slot>
					<slot name="right"></slot>
				</view>
				<slot></slot>
				<!-- 地址右边弹窗 -->
				<u-popup v-model="addressVisible" safe-area-inset-bottom mode="right" width="80%">
					<view class="sww-city-box" :style="{ paddingTop: navHeight + 'px' }">
						<scroll-view scroll-y class="sww-city-list">
							<view class="sww-city-item-wrap">
								<block v-for="(item, index) in addressList" :key="index">
									<view class="sww-city-item u-border" @click="actIndex = index"
										:class="{ 'sww-city-item-act': index === actIndex }">{{ item.name }}</view>
								</block>
							</view>
						</scroll-view>
						<view class="sww-city-bottom">
							<view class="sww-city-reset u-border" @click="actIndex = -1">重置</view>
							<view class="sww-city-submit u-border" @click="$cityChange">确定</view>
						</view>
					</view>
				</u-popup>
			</view>
		</u-sticky>
		<!-- 搜索弹窗 style="background-color: #fff;" 兼容iosx-->
		<!-- 在 prodSearch 不知道是不是嵌套了多一层，遮住了列表（如：infomationList） -->
		<view v-show="searchVisible">
			<u-mask :show="searchVisible" :zoom="false" :custom-style="customSty" style="background-color: #fff;">
				<!-- 搜索输入框 -->
				<view class="sww-search-box u-border-bottom" :style="[customStyle]">
					<view class="sww-search-content">
						<view class="sww-search-left" v-if="addressList.length > 0" @click="$showAddress">
							<u-icon name="e769" custom-prefix="iconfont" size="30rpx" color="#666666"></u-icon>
							<view class="sww-sl-text u-line-1">{{ cityItem.name || '城市' }}</view>
						</view>
						<view class="sww-search-center">
							<view class="sww-s-icon">
								<u-icon name="e752" custom-prefix="iconfont" size="26rpx" color="#999999"></u-icon>
							</view>
							<input v-model="searchVal" class="sww-s-input u-font-26" @confirm="$search"
								confirm-type="search" :focus="searchVisible" placeholder="请输入搜索的关键词" />
							<view class="sww-s-del" v-if="searchVal" @click.stop="$clearSearch(false)">
								<u-icon name="e725" custom-prefix="iconfont" size="26rpx" color="#333333"></u-icon>
							</view>
						</view>
						<view class="sww-search-right" @click="goBack">{{searchVal?'搜索':'取消'}}</view>
					</view>
				</view>
				<!-- 搜索历史 -->

				<view class="history-box" v-if="search_history.length > 0">
					<view class="history-top">
						<view class="history-title u-font-30 fw-bold">历史搜索</view>
						<view class="history-right" @click="$clearHistory">
							<u-icon name="e74b" size="34" color="#666666" custom-prefix="iconfont"></u-icon>
						</view>
					</view>
					<view class="history-list">
						<block v-for="(item, index) in search_history" :key="index">
							<view class="history-item u-line-1" @click="$submit(item)">{{ item }}</view>
						</block>
					</view>
				</view>
				<view class="history-box" v-if="keyList.length > 0">
					<view class="history-top">
						<view class="history-title u-font-30 fw-bold">猜你喜欢</view>
					</view>
					<view class="history-list">
						<block v-for="(item, index) in keyList" :key="index">
							<view class="history-item u-line-1" @click="$submit(item)">{{ item }}</view>
						</block>
					</view>
				</view>
			</u-mask>

		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import {
		uniModal
	} from '../../utils/uniPromise';
	export default {
		props: {
			historyKey: {
				type: String,
				default: 'search_history'
			}, // 本地缓存key -1 表示不加载不保存
			keyWord: {
				type: String,
				default: ''
			}, // 查询的关键词
			checkNav: {
				type: Boolean,
				default: false
			}, // 当前页面是否使用了自定义导航栏
			cityName: {
				type: String,
				default: ''
			},
			enable: {
				type: Boolean,
				default: true
			}, //是否粘性定位
			customStyle: {
				type: Object,
				default: () => {}
			}, // 输入框整体的样式
			url: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				customSty: {},
				addressList: [],
				addressVisible: false,
				navHeight: 0,
				actIndex: -1,
				cityItem: {},
				searchKey: '', // 提交的值
				searchVal: '', // 当前输入的值
				searchVisible: false,
				search_history: [],
				keyList: []
			};
		},
		computed: {
			...mapState(['vuex_system']),
			offsetTop() {
				// #ifdef H5
				return 0;
				// #endif
				// #ifndef H5
				let navHeight = this.$formatPx(this.navHeight)
				this.customSty = {
					paddingTop: navHeight + 'rpx',
					backgroundColor: '#ffffff'
				}
				return navHeight;
				// #endif
			}
		},
		mounted() {
			// this.$initAddress()
			this.initSearchHistory()
			if (this.keyWord) {
				this.getKeyWordList()
			}
		},
		methods: {
			// 获取搜索缓存
			initSearchHistory() {
				if (this.historyKey != -1) {
					uni.getStorage({
						key: this.historyKey || 'search_history',
						complete: (res) => {
							this.search_history = JSON.parse(res.data || "[]")
						}
					})
				}
			},
			// 获取关键词
			getKeyWordList() {
				if (this.vuex_business.tag) {
					this.keyList = this.vuex_business.tag.split('|')
				}
			},
			//初始化城市列表
			// $initAddress() {
			//   this.$resPost('GetWeChatNavNavigationList', {type: 4}).then(({data}) => {
			//     this.addressList = data
			//     this.actIndex = this.addressList.findIndex(item => item.name === this.cityName)
			//   }).catch(()=>{})
			// },
			//打开城市选择弹框
			$showAddress() {
				this.$u.debounce(
					() => {
						this.addressVisible = !this.addressVisible;
					},
					300,
					true
				);
			},
			//选择城市
			$cityChange() {
				this.$u.debounce(
					() => {
						this.addressVisible = false;
						if (this.actIndex > -1) {
							this.cityItem = this.addressList[this.actIndex];
						}
						this.$setHistory(this.cityItem.name || '');
						this.$submit(this.cityItem.name || '');
					},
					300,
					true
				);
			},
			/**
			 * 清除搜索框内容
			 * isSearch:是否提交搜索
			 * */
			$clearSearch(isSearch) {
				this.searchVal = ''
				if (isSearch) {
					this.searchKey = '';
					this.$submit(this.searchKey);
				}
			},
			//显示真正的搜索框
			$showSearch() {
				if (this.url) {
					this.$linkTo(this.url);
				} else {
					this.searchVal = this.searchKey || ''
					this.searchVisible = true;
				}
			},
			//搜索或返回
			goBack() {
				if (this.searchVal) {
					this.$setHistory(this.searchVal);
					this.$submit(this.searchVal)
				} else {
					this.searchVisible = false
				}
			},
			// 软键盘自带搜索
			$search(e) {
				this.$nextTick(() => {
					let searchVal = this.searchVal;
					searchVal = this.$u.trim(searchVal, 'all');
					if (searchVal) this.$setHistory(searchVal);
					this.$submit(searchVal);
				});
			},
			//设置搜索历史
			$setHistory(name) {
				if (name && this.historyKey != -1) {
					let list = this.search_history;
					let index = this.search_history.findIndex((item) => {
						return item == name
					})
					if (index == -1) {
						this.search_history.unshift(name);
					}
					if (list.length >= 20) this.search_history.pop();
					uni.setStorage({
						key: this.historyKey || 'search_history',
						data: JSON.stringify(this.search_history || []),
					})
				}
			},
			//清空搜索历史
			$clearHistory() {
				uniModal({
					title: '清空历史'
				}).then(() => {
					this.search_history = []
					uni.setStorage({
						key: this.historyKey || 'search_history',
						data: JSON.stringify(this.search_history),
					})
				});
			},
			$submit(value) {
				this.searchKey = value;
				this.searchVisible = false;
				this.$emit('change', value);
			}
		},
		watch: {
			// #ifndef H5
			checkNav: {
				handler(val) {
					if (val) {
						this.navHeight = (this.vuex_system.contH || 48) + this.vuex_system.statusBarHeight - 1; //-1防止有空隙
					}
				},
				immediate: true
			}
			// #endif
		}
	};
</script>
<style lang="scss" scoped>
	.sww-search-box {
		width: 100%;
		background-color: #ffffff;
		padding: 30rpx 0;

		.sww-search-content {
			width: 100%;
			padding: 0 24rpx;
			display: flex;
			align-items: center;
		}

		/* 搜索框 */
		.sww-search-left,
		.sww-search-center,
			{
			height: 60rpx;
			display: flex;
			align-items: center;
		}

		.sww-search-right {
			margin-left: 20rpx;
			padding: 6rpx 16rpx;
			line-height: normal;
			text-align: center;
			border-radius: 10rpx;
			color: var(--color);
			border: 1px solid var(--color);
		}

		.sww-search-left {
			padding-right: 32rpx;
		}

		.sww-sl-text {
			max-width: 100rpx;
			margin-left: 8rpx;
			font-size: 30rpx;
			color: #666666;
		}

		.sww-search-center {
			flex: 1;
			background-color: rgba(242, 242, 242, 0.8);
			border-radius: 6rpx;
			padding-right: 66rpx;
			position: relative;

			.sww-s-input {
				width: 100%;
			}

			.sww-s-icon,
			.sww-s-del {
				width: 66rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.sww-s-del {
				position: absolute;
				top: 0;
				right: 0;
			}
		}

		.sww-city-box {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			position: relative;

			.sww-city-list {
				width: 100%;
				flex: 1;
				overflow: hidden;

				.sww-city-item-wrap {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					padding: 24rpx;
				}

				.sww-city-item {
					width: calc(33% - 16rpx);
					height: 110rpx;
					border-radius: 4rpx;
					display: block;
					text-align: center;
					line-height: 110rpx;
					margin: 0 24rpx 24rpx 0;
					color: var(--color);

					&::after {
						border-color: var(--color);
					}

					&:nth-of-type(3n) {
						margin-right: 0;
					}
				}

				.sww-city-item-act {
					color: #ffffff;
					background-color: var(--color);
				}
			}

			.sww-city-bottom {
				width: 100%;
				height: 130rpx;
				padding: 30rpx 24rpx;
				display: flex;

				.sww-city-reset,
				.sww-city-submit {
					width: 180rpx;
					height: 100%;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					color: #999999;

					&::after {
						border-color: #999999;
						border-radius: 12rpx;
					}
				}

				.sww-city-reset {
					margin-right: 12rpx;
				}

				.sww-city-submit {
					flex: 1;
					color: var(--color);

					&::after {
						border-color: var(--color);
					}
			}
				}
		}
	}

	.history-box {
		width: 100%;
		padding: 0 24rpx;
	
	.history-top {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.history-list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.history-item {
				padding: 0 24rpx;
				height: 50rpx;
				border-radius: 25rpx;
				background-color: #efefef;
				line-height: 50rpx;
				max-width: 100%;
				margin: 0 20rpx 16rpx 0;
			}
		}
	}
</style>
